<template>
  <!-- 网点信息 -->
  <view class="content">
    <!-- banner -->
    <view class="banner"><image class="img" src="../../static/img2.jpg" mode="aspectFit"></image></view>

    <!-- 网点具体信息 -->
    <view class="info bg-white">
      <view class="fz40 gray3">{{ state.dataSource.networkName }}</view>
      <view class="ct flex mt30 gray9 fz28">
        <view class="flex1" @click="$jump.navigateTo('/pages/device/index')">
          <view>{{ state.dataSource.machineCount }}台设备</view>
          <view>{{ state.dataSource.machineCellCount }}个柜门</view>
        </view>
        <view class="flex1" @click="$jump.navigateTo('/pages/order/index')">
          <view>今天收益：￥{{ state.dataSource.todayIncoming }}</view>
          <view>今天订单数：{{ state.dataSource.todayOrderCount }}</view>
        </view>
      </view>
    </view>

    <!-- 操作 -->
    <view class="btns flex mt50 bg-white t-c fz26">
      <view class="flex1" @click="$jump.navigateTo(`/pages/network/details?id=${state.id}`)">网点详情</view>
      <view class="flex1" @click="$jump.navigateTo('/pages/device/index')">设备管理</view>
    </view>

    <!-- 地址 -->
    <view class="address flex flex-y-start mt50 bg-white t-c fz26" @click="$jump.navigateTo('/pages/network/map')">
      <sw-icons class="mr10" icon="icon-daohang" size="34" color="#487fff"></sw-icons>
      {{ state.dataSource.detailAddress }}
    </view>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { networkInfo } from '@/common/js/getData.js';

const { proxy } = getCurrentInstance();
const state = reactive({
  id: '',
  dataSource: {}
});

const loadData = () => {
  networkInfo({ id: state.id }).then(res => {
    if (res.success) {
      state.dataSource = res.result;
    }
  });
};

// 页面加载完成
onLoad(async option => {
  await proxy.$onLaunched;
  state.id = option.id;
  loadData();
});
</script>

<style lang="less" scoped>
@import url('@/common/less/common.less');

.banner {
  position: relative;
  .img {
    position: relative;
    z-index: 3;
    width: 750rpx;
    height: 200rpx;
  }
}

.info {
  padding: 40rpx;
  .ct {
    line-height: 50rpx;
  }
}

.btns {
  padding: 20rpx;
  line-height: 60rpx;
  .flex1 {
    border-right: 2rpx dashed #eee;
    &:last-of-type {
      border-right: none;
    }
  }
}

.address {
  padding: 30rpx;
  line-height: 1.5;
  .icon {
    margin-top: 4rpx;
  }
}
</style>
